<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>后台管理系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
        }

        :root {
            --fontColor: #d82019;
        }

        .clearfix::after {
            content: '';
            display: table;
            clear: both;
        }

        /* 这种清除浮动的方式是最为推荐的, 用的人也是最多, 不推荐 overflow ：hidden , 父元素不能使用定位 */
        .wfull {
            width: 100%;
        }

        .obc {
            object-fit: cover;
        }

        .hfull {
            height: 100%;
        }
    </style>
</head>
<body>


<style>
    .root{
        width: 80%;
        margin: auto;
    }
    #title, #content{
        padding: 12px;
        width: 100%;
        border: 1px solid lightgrey;
    }
</style>
<div class="root">

    <img src="/images/ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ.jpg" alt="">
    
    <h2>标题:</h2>
    <input type="text"   id="title">

    <br><br>
    <input   type="file"   style="padding: 12px;">

    <br><br>

    <h2>内容:</h2>
    <div  id="content" contenteditable="true"  > </div>



    <form action="/admin/upload" method="post" enctype="multipart/form-data">
        <input type="file" name="pic">
        <input type="submit">
    </form>




</div>

</body>
<script th:inline="javascript">
    document.getElementById('content').addEventListener('paste', function (e) { onPaste(e) });
    function onPaste(event) {
        let e = event || window.event;
        e.preventDefault(); // 阻止默认粘贴
        // 粘贴事件有一个clipboardData的属性，提供了对剪贴板的访问
        // clipboardData的getData(fomat) 从剪贴板获取指定格式的数据
        let text = (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('在这里输入文本');
        //清除回车
        // text = text.replace(/\[\d+\]|\n|\r/ig, "")
        document.execCommand("insertText", false, text); // 插入
    }
</script>
</html>